<template>
  <div class="home-index-module-b-compontent">
    <div class="module-box">
      <div class="top-title">出入库统计</div>
      <div class="action-row">
        <a-radio-group v-model:value="chartType" size="small" @change="onChangeChartType">
          <a-radio-button :value="1">近7天</a-radio-button>
          <a-radio-button :value="2">近1个月</a-radio-button>
          <a-radio-button :value="3">近3个月</a-radio-button>
        </a-radio-group>
      </div>
      <div class="line-chart-block">
        <div style="height: 100%;" :id="chartid"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { markRaw } from 'vue'
import { GeInOutTaskNumber} from '@/api/modular/system/homeManage'
export default {
  name:'homeIndexModuleBCompontent',
  data(){
    return {
      chartType:1,
      chartid:'',
      chart:null,
      dataSource:[],
      defaultOption:{
      	tooltip: {
      		trigger: 'axis'
      	},
      	legend:{
      		show:true
      	},
      	grid: {
      		left: 30,
      		right: 10,
      		bottom: 70
      	},
      	xAxis: {
      		data: []
      	},
      	yAxis: {},
      	dataZoom: [
      		{
      			startValue: '2014-06-01',
      			type: 'slider'
      		}
      	],
      	series: [
          {name:'入库',type:'line',data:[],smooth: true},
          {name:'出库',type:'line',data:[],smooth: true}
        ]
      }
    }
  },
  methods:{
    init(){
      setTimeout(()=>{
        this.getData()
      },200)
    },
    onChangeChartType(){
     this.getData()
    },
    createChart(){
    	if (!this.chart) {
    		this.chart = markRaw(echarts.init(window.document.getElementById(this.chartid)))
    	}
    },
    getData(){
      let params = {LookType:this.chartType}
      GeInOutTaskNumber(params).then((d)=>{
        this.dataSource = d.data || []
        this.drawChart()
      }).catch(()=>{
        
      })
    },
    drawChart(){
      if (this.dataSource.length<=0) return false;
      let opt =  JSON.parse(JSON.stringify(this.defaultOption))
      if (this.dataSource.length<=8) {
      	opt.grid.bottom = 30
      	delete opt.dataZoom;
      } else {
      	opt.dataZoom[0].startValue = this.dataSource[0].dateStr;
      }
      for (let i=0;i<this.dataSource.length;i++) {
      	opt.xAxis.data.push(this.dataSource[i].dateStr)
        opt.series[0].data.push(this.dataSource[i].rukuNum)
      	opt.series[1].data.push(this.dataSource[i].chukuNum)
      }
      this.destoryChart()
      this.createChart()
      this.chart.setOption(opt)
    },
    destoryChart(){
    	try{
    		this.chart.dispose();
    		window.document.getElementById(this.chartid).innerHTML = '';
    		this.chart = null;
    	}catch(e){
    		//TODO handle the exception
    	}
    }
  },
  created() {
  	this.chartid = 'chart-'+new Date().getTime();
  },
  beforeDestroy() {
  	this.destoryChart()
  },
  mounted() {
  	this.init()
  }
}
</script>

<style lang="less" scoped>
.home-index-module-b-compontent{
  height:100%;
  box-sizing: border-box;
  padding-top: 24px;
  .module-box{
    background-color: #fff;
    border-radius: 10px;
    height:100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .top-title,.action-row{
      flex-shrink: 0;
    }
    .top-title{
      background-color: #fff;
      padding:8px 16px;
      font-size: 18px;
    }
    .action-row{
      padding: 0 20px 12px 50px;
    }
    .line-chart-block{
      flex-grow:1;
    }
  }
}
</style>